<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.css">
</head>
<body>

<!-- .navbar-fixed-top : 让导航栏悬停在页面最顶端 -->
<nav class="navbar navbar-default navbar-fixed-top">
    <!--  在导航栏内部加 .container 使得导航栏内部左右留白  -->
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">在线书城导航栏</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">主页</a></li>
                <li><a href="#">武侠</a></li>
                <li><a href="#">言情</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">工具书</a></li>
                <li><a href="#">少儿</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">童话</a></li>
                        <li><a href="#">体育</a></li>
                        <li><a href="#">音乐</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!--<div class="container" style="margin-top: 50px">-->
<div class="container">
    <!--  把页面需要左右留白的元素加入到 container 当中  -->
    <h1>你好，世界！</h1>
    <!--  模态框  -->
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        点击弹出模态框
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">《西游记》</h4>
                </div>
                <div class="modal-body">
                    《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。现存明刊百回本《西游记》均无作者署名，清代学者吴玉搢等首先提出《西游记》作者是明代吴承恩。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存修改</button>
                </div>
            </div>
        </div>
    </div>

    <!--  轮播图  -->
    <div class="row">
        <!--    左右留白    -->
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="../../img/1.jpg"
                             data-holder-rendered="true">
                    </div>
                    <div class="item">
                        <img src="../../img/2.jpg"
                             data-holder-rendered="true">
                    </div>
                    <div class="item">
                        <img src="../../img/3.jpg"
                             data-holder-rendered="true">
                    </div>
                </div>
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">上一张</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">下一张</span>
                </a>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    <p>
        <button type="button" class="btn btn-lg btn-default">btn-default</button>
        <button type="button" class="btn btn-lg  btn-primary">btn-primary</button>
        <button type="button" class="btn btn-lg  btn-info">btn-info</button>
        <button type="button" class="btn btn-lg  btn-success">btn-success</button>
        <button type="button" class="btn btn-lg btn-warning">btn-warning</button>
        <button type="button" class="btn  btn-lg btn-danger">btn-danger</button>
        <button type="button" class="btn btn-lg  btn-link">btn-link</button>
    </p>
    <p>
        <button type="button" class="btn btn-default">btn-default</button>
        <button type="button" class="btn btn-primary">btn-primary</button>
        <button type="button" class="btn btn-info">btn-info</button>
        <button type="button" class="btn btn-success">btn-success</button>
        <button type="button" class="btn btn-warning">btn-warning</button>
        <button type="button" class="btn btn-danger">btn-danger</button>
        <button type="button" class="btn btn-link">btn-link</button>
    </p>
    <p>
        <button type="button" class="btn btn-sm btn-default">btn-default</button>
        <button type="button" class="btn btn-sm  btn-primary">btn-primary</button>
        <button type="button" class="btn btn-sm  btn-info">btn-info</button>
        <button type="button" class="btn btn-sm  btn-success">btn-success</button>
        <button type="button" class="btn btn-sm  btn-warning">btn-warning</button>
        <button type="button" class="btn btn-sm  btn-danger">btn-danger</button>
        <button type="button" class="btn  btn-sm btn-link">btn-link</button>
    </p>
    <p>
        <button type="button" class="btn btn-xs btn-default">btn-default</button>
        <button type="button" class="btn btn-xs  btn-primary">btn-primary</button>
        <button type="button" class="btn btn-xs  btn-info">btn-info</button>
        <button type="button" class="btn btn-xs  btn-success">btn-success</button>
        <button type="button" class="btn btn-xs  btn-warning">btn-warning</button>
        <button type="button" class="btn btn-xs  btn-danger">btn-danger</button>
        <button type="button" class="btn btn-xs  btn-link">btn-link</button>
    </p>

    <!--公告板-->
    <div class="jumbotron">
        <h1 style="margin: 30px">公告板</h1>
        <p>这是一个公告板；今日内容有：XX</p>
    </div>

    <div>
        <!--    bootstrap表格1    -->
        <table class="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>18</td>
                <td>男</td>
            </tr>
            </tbody>
        </table>

        <!--    bootstrap表格2:有边框的表格    -->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>18</td>
                <td>男</td>
            </tr>
            </tbody>
        </table>

        <!--    bootstrap表格3:隔行换色的边框表格 class可叠加    -->
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>18</td>
                <td>男</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div>
        <h2>Thumbnails</h2>
        <!--    img-thumbnail 样式 可以把图片大小控制在container以内    -->
        <img src="../../img/1.jpg" class="img-thumbnail">
        <img src="../../img/1.jpg" class="img-thumbnail" height="100px" width="200px">
    </div>

    <!--  进度条  -->
    <p>
    <div class="progress">
        <div class="progress-bar" style="width: 50%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 50%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" style="width: 50%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width: 50%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width: 50%"></div>
    </div>
    <!--  复合型进度条  -->
    <div class="progress">
        <div class="progress-bar" style="width: 50%"></div>
        <div class="progress-bar progress-bar-success" style="width: 30%"></div>
        <div class="progress-bar progress-bar-info" style="width: 10%"></div>
    </div>
    </p>

    <!--  列表集合  -->
    <p>

    <ul class="list-group">
        <li class="list-group-item list-group-item-heading">无序列表项3</li>
        <li class="list-group-item">无序列表项1</li>
        <li class="list-group-item">无序列表项2</li>
        <li class="list-group-item">无序列表项3</li>
        <li class="list-group-item list-group-item-success">无序列表项3</li>
        <li class="list-group-item list-group-item-info">无序列表项3</li>
        <li class="list-group-item list-group-item-danger">无序列表项3</li>
        <li class="list-group-item list-group-item-text">无序列表项3</li>
        <li class="list-group-item list-group-item-warning">无序列表项3</li>
    </ul>

    <div class="list-group">
        <a href="#" class="list-group-item active">
            可点击的超链接1
        </a>
        <a href="#" class="list-group-item list-group-item-success">可点击的超链接1</a>
        <a href="#" class="list-group-item list-group-item-info">可点击的超链接1</a>
        <a href="#" class="list-group-item">可点击的超链接1</a>
        <a href="#" class="list-group-item">可点击的超链接1</a>
    </div>

    <!--  带有详细描述的超链接列表集合  -->
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h3>可点击的超链接1</h3>
            <p>详细介绍</p>
        </a>
        <a href="#" class="list-group-item list-group-item-success">
            <h3>《老人与海》</h3>
            <p>
                该作围绕一位老年古巴渔夫，与一条巨大的马林鱼在离岸很远的湾流中搏斗而展开故事的讲述。尽管海明威笔下的老人是悲剧性的，但他身上却有着尼采“超人”的品质，泰然自若地接受失败，沉着勇敢地面对死亡，这些“硬汉子”体现了海明威的人生哲学和道德理想，即人类不向命运低头，永不服输的斗士精神和积极向上的乐观人生态度。</p>
        </a>
        <a href="#" class="list-group-item list-group-item-info">
            <h3>《格林童话》</h3>
            <p>它是世界童话的经典之作，自问世以来，在世界各地影响十分广泛。格林兄弟以其丰富的想象、优美的语言给孩子们讲述了一个个神奇而又浪漫的童话故事。在国内，日本，中国台湾也有根据《格林童话》创作的故事集。</p>
        </a>
        <a href="#" class="list-group-item">可点击的超链接1</a>
        <a href="#" class="list-group-item">可点击的超链接1</a>
    </div>
    </p>

    <!--  便签  -->
    <div class="panel panel-default">
        <!--  便签标题  -->
        <div class="panel-heading">
            <h3 class="panel-title">
                《三国演义》
            </h3>
        </div>
        <!--  便签内容  -->
        <div class="panel-body">
            《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，被列为中国古典四大名著之一。明清时期甚至有“第一才子书”之称。
        </div>
    </div>

    <div class="panel panel-primary">
        <!--  便签标题  -->
        <div class="panel-heading">
            <h3 class="panel-title">
                《三国演义》
            </h3>
        </div>
        <!--  便签内容  -->
        <div class="panel-body">
            《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，被列为中国古典四大名著之一。明清时期甚至有“第一才子书”之称。
        </div>
    </div>

    <div class="panel panel-info">
        <!--  便签标题  -->
        <div class="panel-heading">
            <h3 class="panel-title">
                《三国演义》
            </h3>
        </div>
        <!--  便签内容  -->
        <div class="panel-body">
            《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，被列为中国古典四大名著之一。明清时期甚至有“第一才子书”之称。
        </div>
    </div>

    <div class="panel panel-success">
        <!--  便签标题  -->
        <div class="panel-heading">
            <h3 class="panel-title">
                《三国演义》
            </h3>
        </div>
        <!--  便签内容  -->
        <div class="panel-body">
            《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，被列为中国古典四大名著之一。明清时期甚至有“第一才子书”之称。
        </div>
    </div>

    <div class="panel panel-danger">
        <!--  便签标题  -->
        <div class="panel-heading">
            <h3 class="panel-title">
                《三国演义》
            </h3>
        </div>
        <!--  便签内容  -->
        <div class="panel-body">
            《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，被列为中国古典四大名著之一。明清时期甚至有“第一才子书”之称。
        </div>
    </div>
    <div class="panel panel-warning">
        <!--  便签标题  -->
        <div class="panel-heading">
            <h3 class="panel-title">
                《三国演义》
            </h3>
        </div>
        <!--  便签内容  -->
        <div class="panel-body">
            《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，被列为中国古典四大名著之一。明清时期甚至有“第一才子书”之称。
        </div>
    </div>

    <!--  演示栅格系统  -->
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-4
                    </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-4
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-4 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-4
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-4 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-4
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-2 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-2
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-2 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-2
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-2 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-2
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-2 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-2
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-2 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-2
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-2 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-2
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-6 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-6
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-4 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-4
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-2 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-2
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-6 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-6
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        col-md-6 </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    col-md-6
                </div>
            </div>
        </div>
    </div>

    <!--  居中,左右各留1/4的空白  -->
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="panel panel-info">
                <!--  便签标题  -->
                <div class="panel-heading">
                    <h3 class="panel-title">
                        《三国演义》
                    </h3>
                </div>
                <!--  便签内容  -->
                <div class="panel-body">
                    《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说，被列为中国古典四大名著之一。明清时期甚至有“第一才子书”之称。
                </div>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>


</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../../js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script type="text/javascript">
    var onResize = function () {
        $('body').css('margin-top', $('.navbar:first').height());
    };
    $(window).resize(onResize);
    $(function () {
        onResize();
    });
</script>
</body>
</html>